<script setup lang="ts">
import { ref, computed, h, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Menu, Layout, Badge, Avatar, Dropdown } from 'ant-design-vue';
import type { MenuProps } from 'ant-design-vue';
import {
  HomeOutlined,
  DashboardOutlined,
  UserOutlined,
  BellOutlined,
  MessageOutlined,
  AppstoreOutlined
} from '@ant-design/icons-vue';
import { DownOutlined } from '@ant-design/icons-vue';
import {useUserStore} from "@/stores/user.ts";
import {userLogout} from "@/api/userController.ts";

const props = defineProps({
  isCollapsed: {
    type: Boolean,
    default: false
  },
  isMobile: {
    type: Boolean,
    default: false
  }
});
const logout = async () => {
  await userLogout()
  userStore.clearUser()
  await router.push("/user/login")
}
const emit = defineEmits(['menu-click']);

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

onMounted(async () => {
  // 组件挂载时获取用户信息
  await userStore.getLoginUser();
});

// 判断是否为管理员
const isAdmin = computed(() => {
  return userStore.loginUser.userRole === 'admin';
});

// 菜单项配置
const menuItems = computed(() => {
  const items: MenuProps['items'] = [
    {
      key: '/',
      icon: () => h(HomeOutlined),
      label: props.isCollapsed && !props.isMobile ? '' : '首页',
    },
    {
      key: '/dashboard',
      icon: () => h(DashboardOutlined),
      label: props.isCollapsed && !props.isMobile ? '' : '控制台',
    },
    {
      key: '/profile',
      icon: () => h(UserOutlined),
      label: props.isCollapsed && !props.isMobile ? '' : '个人中心',
    },
  ];
  
  // 管理员特有菜单
  if (isAdmin.value) {
    items.push({
      key: '/admin/usermanage',
      icon: () => h(UserOutlined),
      label: props.isCollapsed && !props.isMobile ? '' : '用户管理',
    });
    
    items.push({
      key: '/admin/appmanage',
      icon: () => h(AppstoreOutlined),
      label: props.isCollapsed && !props.isMobile ? '' : '应用管理',
    });
  }
  
  return items;
});

// 当前选中的菜单项
const selectedKeys = ref<string[]>([route.path]);

// 菜单项点击事件处理
const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
  router.push(key as string);
  selectedKeys.value = [key as string];
  emit('menu-click');
};

// 用户菜单项
const userMenuItems = [
  {
    key: 'profile',
    label: '个人资料',
  },
  {
    key: 'settings',
    label: '账户设置',
  },
  {
    key: 'logout',
    label: '退出登录',
  },
];

// 用户菜单处理
const handleUserMenuClick = ({ key }: any) => {
  if (key === 'logout') {
    // 处理登出逻辑
    logout();
  } else if (key === 'profile') {
    router.push('/profile');
  }
};
</script>

<template>
  <!-- 移动端顶部导航 -->
  <Layout.Header v-if="isMobile" class="mobile-header">
    <div class="mobile-header-content">
      <div class="mobile-logo">AI Generator</div>
      <div class="mobile-actions">
        <Badge count="5" dot>
          <BellOutlined class="notification-icon" />
        </Badge>
      </div>
    </div>
  </Layout.Header>

  <!-- 侧边菜单导航 -->
  <template v-else>
    <Menu
      :theme="isMobile ? 'dark' : 'light'"
      :mode="isMobile ? 'horizontal' : 'vertical'"
      v-model:selectedKeys="selectedKeys"
      :items="menuItems"
      @click="handleMenuClick"
      :inline-collapsed="isCollapsed"
      class="side-menu"
    />

    <!-- 侧边栏底部 -->
    <div v-if="!isMobile && !isCollapsed" class="sidebar-footer">
      <Dropdown :menu="{ items: userMenuItems, onClick: handleUserMenuClick }" placement="topRight">
        <div class="user-info">
          <Avatar size="small" :src="userStore.loginUser.userAvatar" />
          <span class="username" v-if="userStore.loginUser.id !== null">{{userStore.loginUser.userName}}</span>
          <span class="username" v-else @click="router.push('/user/login')">去登录</span>
          <DownOutlined />
        </div>
      </Dropdown>
    </div>
  </template>
</template>

<style scoped>
/* 移动端头部样式 */
.mobile-header {
  padding: 0 16px;
  background: linear-gradient(135deg, #1668dc, #096dd9);
  height: 56px;
  line-height: 56px;
  display: flex;
  align-items: center;
  color: white;
}

.mobile-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mobile-logo {
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}

.mobile-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notification-icon {
  font-size: 20px;
  color: white;
  cursor: pointer;
}

/* 侧边栏菜单样式 */
.side-menu {
  border-right: 0;
}

.side-menu :deep(.ant-menu-item) {
  display: flex;
  align-items: center;
  margin: 8px 0;
  border-radius: 0 24px 24px 0;
  margin-right: 12px;
}

.side-menu :deep(.ant-menu-item.ant-menu-item-selected) {
  background: #e6f4ff;
}

/* 侧边栏底部用户信息 */
.sidebar-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 16px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s;
}

.user-info:hover {
  background: rgba(0, 0, 0, 0.04);
}

.username {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}
</style>
